<template>
	<view class="brand">
		<uni-forms
			:model="brandFormData"
			:rules="brandRules"
			:label-width="100"
			labelAlign="right"
			ref="brandRef"
		>
			<uni-forms-item label="品牌Logo">
				<uni-file-picker
					v-model="brandFormData.thumb"
					fileMediatype="image"
					:limit="1"
					mode="grid"
				/>
			</uni-forms-item>
			<uni-forms-item
				label="品牌名称"
				name="name"
				required
			>
				<uni-easyinput
					type="text"
					v-model="brandFormData.name"
					placeholder="请输入品牌名称"
				/>
			</uni-forms-item>
			<uni-forms-item
				label="商户电话"
				name="mobile"
				required
			>
				<uni-easyinput
					type="text"
					v-model="brandFormData.mobile"
					placeholder="请输入商户电话"
				/>
			</uni-forms-item>
			<uni-forms-item
				label="商户地址"
				name="address"
			>
				<uni-easyinput
					type="text"
					v-model="brandFormData.address"
					placeholder="请输入商户地址"
				/>
			</uni-forms-item>
			<uni-forms-item
				label="商家介绍"
				name="about"
			>
				<uni-easyinput
					type="textarea"
					v-model="brandFormData.about"
					placeholder="请输入商家介绍"
				/>
			</uni-forms-item>
		</uni-forms>
		<button
			type="primary"
			@click="submitForm"
		>
			提交信息
		</button>
	</view>
</template>

<script>
import { mapMutations } from 'vuex';
const brandCloudObj = uniCloud.importObject('my-mall-brand');

export default {
	data() {
		return {
			brandFormData: {
				name: '',
				mobile: '',
				address: '',
				about: '',
				thumb: []
			},
			brandRules: {
				name: {
					rules: [
						{
							required: true,
							errorMessage: '请输入正确的品牌名称'
						},
						{
							minLength: 3,
							maxLength: 20,
							errorMessage: '长度在{minLength}到{maxLength}之间'
						}
					]
				},
				mobile: {
					rules: [
						{
							required: true,
							errorMessage: '请输入正确的品牌电话'
						},
						{
							validateFunction: (rule, value, data, callback) => {
								let res = /^1[3-9]\d{9}$/.test(value);
								if (!res) {
									callback('手机格式不正确');
								}
								return;
							}
						}
					]
				}
			},
			hobby: []
		};
	},
	onLoad() {
		this.isManage();
		this.getBrand();
	},
	methods: {
		...mapMutations(['set_brand']),
		getBrand() {
			brandCloudObj.get().then((res) => {
				if (!res.data.length) return;
				this.brandFormData = res.data[0];
			});
		},
		submitForm() {
			this.$refs.brandRef
				.validate()
				.then((res) => {
					let arr = this.brandFormData.thumb.map((item) => {
						return {
							extname: item.extname,
							url: item.url,
							name: item.name,
							size: item.size
						};
					});
					this.brandFormData.thumb = arr;

					this.addAndUpdate();
				})
				.catch((err) => {
					console.log(err);
				});
		},
		// 新增或修改
		async addAndUpdate() {
			let toastTitle;
			// 修改
			if (this.brandFormData._id) {
				await brandCloudObj.update(this.brandFormData);
				toastTitle = '修改成功';
			}
			// 新增
			else {
				await brandCloudObj.add(this.brandFormData);
				toastTitle = '新增成功';
			}

			uni.showToast({
				title: toastTitle,
				mask: true
			});
			setTimeout(() => {
				uni.navigateBack();
			}, 1500);
			// 同步到vuex
			this.set_brand(this.brandFormData);
			// console.log(this.brandFormData);
		}
	}
};
</script>

<style lang="scss" scoped>
.brand {
	padding: 30rpx;
}
</style>
